<template>
  <div>
    <div class="list">
      <i class="el-icon-s-order" style="color: rgb(255, 103, 0)"></i>
      确认订单
    </div>
    <hr />

    <!-- 数据 -->
    <div class="s1">
      <div class="s2">
        <div class="s4"></div>
        <div class="s3">
          <div class="s5">&emsp;&emsp;添加地址</div>
          <div class="s6">
            <div class="s7">
              <p>陈同学</p>
              <p>13580018623</p>
              <p>广东 广州市 白云区 江高镇</p>
              <p>广东白云学院</p>
            </div>
            <div class="s7">
              <p>陈同学</p>
              <p>13580018623</p>
              <p>广东 广州市 白云区 江高镇</p>
              <p>***</p>
            </div>
            <div class="s7">
              <i data-v-2d1e127a="" class="el-icon-circle-plus-outline"></i>
              <p>添加新地址</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ss1">
      <div class="ss2">
        <div class="ss3">&emsp;&emsp;商品及优惠券</div>
        <div class="ss4">
          <ul>
            <li v-for="item in pic" :key="item.id">
              <div class="ss5">
                <img :src="'http://101.132.181.9:3000/' + item.productImg" />
                <p>{{ item.productName }}</p>
              </div>
              <p>{{ item.price }}x{{ item.num }}</p>
              <p style="color: #ff6700">{{ item.price }}</p>
            </li>
          </ul>
        </div>
        <div class="ss6">
          <span>&emsp;&emsp;配送方式</span>
          <font>包邮</font>
        </div>
        <div class="ss6">
          <span>&emsp;&emsp;发票</span>
          <font>电子发票&emsp;个人&emsp;商品明细</font>
        </div>
        <div class="ss7">
          <ul>
            <div>
              <li>
                商品件数：&emsp;&emsp;
                <p style="color: #ff6700">{{ checknums.allnum }}件</p>
                &emsp;&emsp;
              </li>
              <li>
                商品总价：&emsp;&emsp;
                <p style="color: #ff6700">{{ checknums.checknum }}元</p>
                &emsp;&emsp;
              </li>
              <li>
                活动优惠：&emsp;&emsp;
                <p style="color: #ff6700">-0元</p>
                &emsp;&emsp;
              </li>
              <li>
                优惠券抵扣:&emsp;&emsp;
                <p style="color: #ff6700">-0元</p>
                &emsp;&emsp;
              </li>
              <li>
                应付总额:&emsp;&emsp;
                <p style="color: #ff6700; font-size: 20px">
                  {{ checknums.checknum }}元
                </p>
                &emsp;&emsp;
              </li>
            </div>
          </ul>
        </div>
        <div class="ss8"></div>
      </div>
    </div>
    <hr />
    <div class="a1">
      <div class="a2">
        <div class="a3"></div>
        <div class="a4">
          <button @click="$router.go(-1)">返回购物车</button>
          <button @click="add">结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { OrderList } from "@/api/shop";
export default {
  name: "confirmOrder",
  data() {
    return {
      userId: this.$store.state.users.user_id,
      pic: this.$store.state.pic,
    };
  },
  created() {
    // this.getdata();
  },
  computed: {
    checknums() {
      var allnum = 0;
      var checknum = 0;
      this.pic.forEach((item) => {
        allnum += item.num;
        checknum += item.price * item.num;
      });
      return {
        allnum,
        checknum,
      };
    },
  },
  methods: {
    async add() {
      let res = await OrderList({ user_id: this.userId, products: this.pic });
      console.log(res);
      if (res.code == "001" || res.code == "002") {
        this.$notify.success({
          title: "成功",
          message: "购买成功",
          type: "success",
        });
        this.$router.push("/order");
      }
    },

    // async  getdata() {
    //       console.log(res)
    //   }
  },
};
</script>

<style lang="scss" scoped>
hr {
  width: 80%;
  margin: auto;
}
.a1 {
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  .a2 {
    width: 80%;
    background-color: white;
    height: 100%;
    margin: auto;
    display: flex;
    .a3 {
      width: 70%;
      height: 100%;
      background-color: white;
    }

    .a4 {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-content: space-around;
      .a5 {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.ss1 {
  width: 100%;
  height: 519px;
  background-color: #f5f5f5;

  .ss7 {
    float: right;
    border-bottom: 1px solid #e0e0e0;

    ul li {
      display: flex;
      margin-top: 20px;
    }
  }
  .ss2 {
    width: 80%;
    height: 100%;
    margin: auto;
    background-color: white;
    .ss6 {
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #e0e0e0;

      display: flex;
      align-items: center;
      span {
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
      }
      font {
        float: left;
        line-height: 38px;
        font-size: 14px;
        color: #ff6700;
      }
    }

    .ss3 {
      width: 100%;
      height: 40px;
      background-color: white;
      border-bottom: 1px solid #e0e0e0;
      color: #333;
      font-size: 18px;
      line-height: 40px;
    }
    .ss4 {
      width: 100%;
      background-color: white;
      border-bottom: 1px solid #e0e0e0;

      ul li {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .ss5 {
          display: flex;
        }
      }
      ul li img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
.s1 {
  width: 100%;
  height: 319px;
  background-color: #f5f5f5;
  .s4 {
    width: 100%;
    height: 50px;
    background-color: white;
  }
  .s2 {
    width: 80%;
    height: 100%;
    background-color: white;
    margin: auto;
    margin-top: 15px;
    .s10 {
      width: 100%;
      height: 50px;
      background-color: yellow;
    }
    .s3 {
      width: 100%;
      height: 259px;
      .s5 {
        width: 100%;
        height: 50px;
        color: #333;
        font-size: 18px;
        line-height: 50px;
        margin-bottom: 20px;
        background-color: aliceblue;
      }
      .s6 {
        width: 100%;
        background-color: white;
        height: 200px;
        .s7 {
          float: left;
          margin-left: 20px;
          width: 270px;
          height: 195px;
          background-color: rebeccapurple;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
      }
    }
  }
}
.list {
  width: 80%;
  height: 64px;
  margin: auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
hr {
  background-color: red;
}
</style>